<script setup lang="ts">
import { getTopicListAPI } from "@/api/topic";
import { PageProps } from "@/hooks/usePage";
import mesrcollList from "../../components/mescroll-list/mesroll-list.vue";
const show = ref(false);
const meScrollPageRef = ref();
const closePopup = () => {
  show.value = false;
};
const search = (val: any) => {
  console.log(val.detail.value);
  page.params.search = val.detail.value;
  meScrollPageRef.value.resetData();
};

const page = reactive<PageProps>({
  params: {
    // 搜索参数
    search: "",
  },
  fetchData: getTopicListAPI, // 请求接口 带分页的
});

const add = (val: ITopic, list: ITopic[]) => {
  console.log(list, val);
  const index = list.findIndex((item: ITopic) => item.id === val.id);
  if (index !== -1) {
    list.splice(index, 1);
    return;
  }

  list.push(val);
  console.log(1111, list);
};

// 列表是否包含
const isContain = (val: ITopic, list: ITopic[]) => {
  return list.findIndex((item: ITopic) => item.id === val.id) !== -1;
};

defineExpose({
  show,
});
</script>

<template>
  <fui-bottom-popup :show="show" @close="closePopup">
    <view>
      <view class="header-title flex-center">
        添加话题
        <image
          mode="widthFix"
          :src="$getImg('/img/common/close.png')"
          @click="show = false"
        ></image>
      </view>
      <view class="search">
        <fui-search-bar
          background="#fff"
          inputBackground="#f5f5f5"
          placeholder="搜索你想要的话题"
          isLeft
          @search="search"
        ></fui-search-bar>
      </view>

      <mesrcollList type="uni" height="800" ref="meScrollPageRef" :page="page">
        <view class="topic-list py-[10rpx] px-[30rpx] flex-column gap-[20rpx]">
          <view
            class="topic-item flex-between"
            v-for="(item, index) in page.data"
            :key="index"
          >
            <view class="topic-info flex-row gap-[20rpx]">
              <image
                mode="widthFix"
                :src="$getImg('/img/icon/publish/topic.png')"
              ></image>
              <view class="name flex-column-between">
                {{ item.name }}
                <view class="viewCount">{{ item.views }}浏览</view>
              </view>
            </view>
            <view
              class="addBtn py-[10rpx] px-[20rpx]"
              @click="add(item, $parent!.topicList)"
              >{{
                isContain(item, $parent!.topicList) ? "已添加" : "添加"
              }}</view
            >
          </view>
        </view>
      </mesrcollList>
    </view>
  </fui-bottom-popup>
</template>

<style scoped lang="scss">
.header-title {
  font-weight: 700;
  font-size: 16px;
  position: relative;
  padding: 30rpx 0 20rpx;

  image {
    width: 20rpx;
    position: absolute;
    right: 40rpx;
  }
}

.topic-list {
  .addBtn {
    background-color: #e6edff;
    font-size: 14px;
    color: #376af7;
    border-radius: 888rpx;
  }

  .topic-item {
    .topic-info {
      .viewCount {
        font-size: 12px;
        color: #999;
        font-weight: 400;
      }

      .name {
        font-size: 14px;
        font-weight: 700;
      }

      image {
        width: 74rpx;
      }
    }
  }
}
</style>
